<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   $("pre.code").text($("div#div_1").html());
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };
   sub.steps.push(function() { removeBullets("remove1");});
   sub.steps.push(function() { removeBullets("javascript");$('.step1').show();$('pre.code').animate({width: "760", marginLeft: "-70"}, 2500, function() {$("div#div_1").show();})});
   sub.steps.push(function() { $('div#div_1').show();});
   sub.steps.push(function() { $('.smil').hide();});
   sub.steps.push(function() { $('.javascript').show();showJavascript()});
    
    polygon = {};
    polygon.svg  = document.getElementsByTagName('svg')[1];
    polygon.n = 6;
    polygon.r = 30;
    var svgNS = polygon.svg.getAttribute('xmlns');
    polygon.pathEl = polygon.svg.getElementsByClassName('box')[0];
   polygon.path = new iPath().turtleLine({a: Math.PI*2 / polygon.n, r: polygon.r * Math.sin(Math.PI/polygon.n) * 2 }).repeat(polygon.n);
polygon.func = function(text,init) { 
      polygon.path = new iPath().turtleLine({a: Math.PI*2 / polygon.n, r: polygon.r * Math.sin(Math.PI/polygon.n) * 2 }).repeat(polygon.n);
      polygon.pathEl.setAttribute('d', "M 100 10" + polygon.path.dPath(3), init); 
};
showJavascript = function() {
$('#below').animate({marginTop: '-150'}, 2500);
buildInput('var:polygon.n, label:number of corners, defaultvalue:6, size:3, type:slider, max:100, min:3, step:1', {panelid: '#below', func:polygon.func});
buildInput('var:polygon.r, label:radius, defaultvalue:30, size:3, type:slider, max:60, min:5, step:0.2', {panelid: '#below', func:polygon.func});
polygon.func('',false);
}

});
</script>
    </head> 
<body class="jsxgraph_body">
<div class="header step0">3 ways to animate SVG</div>
<ul class="step0">
  <li class="step0 remove1">CSS (not yet standardized -mozilla and -webkit directives)</li>
  <li class="step0 smil">SMIL (Synchronized Multimedia Integration Language)</li>
  <li class="step0 javascript">Javascript</li>
</ul>
<table class="step1 hide smil"><tr><td width="50%">
<pre class="code">
</pre>
</td>
<td width="50%">
<div id="div_1" class="hide"> 
<svg id="figs" xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="0 0 50 60">
<g transform="rotate" stroke="red" fill="black" stroke-width="2">
<line x1="4" y1="55" x2="14" y2="20"/>
<line x1="24" y1="20" x2="34" y2="55"/>
<circle cx="19" cy="15" r="7"/>
<animateTransform  
            attributeName="transform"  
            begin="0s"  
            dur="3s"  
            type="rotate"
            from="0 60 60"  
            to="360 100 60"  
            repeatCount="indefinite"   
            />
  </g>
</svg>
</div>
</td>
</tr></table>
<div class="javascript hide">
<div class="svg_border ">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" viewbox="0 0 800 500"> 
    <g stroke="black" stroke-width="1" fill="none" transform="scale(5)">
    <path class="box">
    </g>
  </svg>
</div>
<div id="below">
</div>
</div>
</div>
</body> 
</html> 
